<template>
  <view class="container">
    <view class="content">
      <view class="content-title d-rn d-ac d-jb">
        <text>{{ dict[info.type] }}</text>
        <text>{{ info.createTime }}</text>
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('apply_time') }}</text>
        <text>{{ info.createTime }}</text>
      </view>
      <template v-if="info.type == 3">
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('reissue_card_time')}}：</text>
          <text>{{ info.attendanceCardDTO.punchDate }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('reissue_card_type')}}：</text>
          <text>{{
            info.attendanceCardDTO.punchForm == 1 ? $t('clock_in_card') : $t('clock_out_card')
          }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('modify_time1')}}：</text>
          <text>{{ info.attendanceCardDTO.punchTime }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('card_reason')}}：</text>
          <text>{{ info.attendanceCardDTO.remark }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('attachment')}}：</text>
          <image
            v-if="info.attendanceCardDTO.pic"
            :src="info.attendanceCardDTO.pic"
            mode="widthFix"
            style="width: 100%"
          ></image>
        </view>
      </template>
      <template v-if="info.type == 5">
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('apply_time')}}：</text>
          <text>{{ info.overtimeApplyDTO.createTime }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('overtime_hours')}}：</text>
          <text>{{ info.overtimeApplyDTO.duration }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('apply_reason')}}：</text>
          <text>{{ info.overtimeApplyDTO.remark }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('attachment')}}：</text>
          <image
            v-if="info.overtimeApplyDTO.pic"
            :src="info.overtimeApplyDTO.pic"
            mode="widthFix"
            style="width: 100%"
          ></image>
        </view>
      </template>
      <template v-if="info.type == 4">
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('clock_in_date')}}：</text>
          <text>{{ info.modifyPunchDTO.punchDate }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('clock_in_time')}}：</text>
          <text>{{ info.modifyPunchDTO.punchTime }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('modify_time1')}}：</text>
          <text>{{ info.modifyPunchDTO.changeTime }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('modify_reason')}}：</text>
          <text>{{ info.modifyPunchDTO.remark }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('attachment')}}：</text>
          <image
            v-if="info.modifyPunchDTO.pic"
            :src="info.modifyPunchDTO.pic"
            mode="widthFix"
            style="width: 100%"
          ></image>
        </view>
      </template>
      <template v-if="info.type == 1 || info.type == 2">
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('start_time')}}：</text>
          <text>{{ info.jqEmployerLeaveDTO.leaveStartDate }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('end_time')}}：</text>
          <text>{{ info.jqEmployerLeaveDTO.leaveStartDate }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('leave_duration')}}：</text>
          <text>{{ info.jqEmployerLeaveDTO.leaveDays || 0 }}天</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('leave_reason1')}}：</text>
          <text>{{ info.jqEmployerLeaveDTO.leaveReason }}</text>
        </view>
        <view class="content-one d-rn d-ac d-jb">
          <text>{{$t('attachment')}}：</text>
          <image
            v-if="info.jqEmployerLeaveDTO.leaveFile"
            :src="info.jqEmployerLeaveDTO.leaveFile"
            mode="widthFix"
            style="width: 100%"
          ></image>
        </view>
      </template>
      <view class="content-one d-rn d-ac d-jb">
        <text>{{ $t('Remarks') }}</text>
        <text>{{ info.remark }}</text>
      </view>
      <!-- <view class="content-one d-rn d-ac d-jb">
        <text>请假类型</text>
        <text>{{
          info.approval.eventType == 1
            ? "假期申请"
            : info.approval.eventType == 2
            ? "修改打卡时间"
            : "申请加班"
        }}</text>
      </view>
      <view class="content-one d-rn d-ac d-jb" v-if="info.approval.dayStart">
        <text>开始时间</text>
        <text>{{ info.approval.dayStart }}</text>
      </view>
      <view class="content-one d-rn d-ac d-jb" v-if="info.approval.dayEnd">
        <text>结束时间</text>
        <text>{{ info.approval.dayEnd }}</text>
      </view>
      <view
        class="content-one d-rn d-ac d-jb"
        v-if="info.approval.punchType != null && info.approval.eventType == 2"
      >
        <text>修改的打卡时间段</text>
        <text>{{ info.approval.punchType == 1 ? "上班卡" : "下班卡" }}</text>
      </view>

      <view
        class="content-one d-rn d-ac d-jb"
        v-if="info.approval.leaveDuration"
      >
        <text>请假时长</text>
        <text>{{ info.approval.leaveDuration }}天</text>
      </view>
      <view class="content-one d-rn d-ac d-jb">
        <text>备注</text>
        <text>{{ info.approval.remark }}</text>
      </view> -->
    </view>
    <view class="result">
      <view class="result-top">
        <text>{{$t('approval_result')}}：</text>
        <text
          :class="
            !info.approvalStatus
              ? 'qback'
              : info.approvalStatus == 1
              ? 'wback'
              : info.approvalStatus == 2
              ? 'eback'
              : 'rback'
          "
          >{{
            info.approvalStatus == 0
              ? $t('pending_review')
              : info.approvalStatus == 1
              ? $t('under_review')
              : info.approvalStatus == 2
              ? $t('agree')
              : $t('reject')
          }}</text
        >
      </view>
      <view class="result-bto d-rn d-ac">
        <text>{{ info.approver }}({{ info.position }})</text>
        <text>{{ info.approvalTime }}</text>
      </view>
    </view>
  </view>
</template>

<script>
var _self;
import { getMessageInfo } from "../../api/index.js";
import { getDictionary } from "@/api/common";
export default {
  data() {
    return {
      acceptId: "",
      info: {},
      dict: {},
    };
  },
  onLoad(options) {
    _self = this;
    if (options && options.data) {
      _self.acceptId = JSON.parse(decodeURIComponent(options.data));
    }
    _self.getdetailsList();
  },
  onShow() {
    getDictionary("approval_event").then((res) => {
      res.data.map((item) => {
        this.dict[item.dictValue] = item.dictLabel;
      });
    });
  },
  methods: {
    getdetailsList() {
      getMessageInfo({
        messageId: _self.acceptId.id,
      }).then((res) => {
        if (res.code == 200) {
          _self.info = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
.container {
  width: 100%;
  .qback {
    color: darkred;
  }
  .wback {
    color: dodgerblue;
  }
  .eback {
    color: limegreen;
  }
  .rback {
    color: orangered;
  }
  .content {
    background-color: #ffffff;
    &-title {
      padding: 24rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eeeeee;
      text:nth-of-type(1) {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
      }
      text:nth-of-type(2) {
        font-size: 30rpx;
        color: #999990;
      }
    }
    &-one {
      padding: 24rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eeeeee;
      text:nth-of-type(1) {
        font-size: 30rpx;
        color: #333333;
      }
      text:nth-of-type(2) {
        font-size: 30rpx;
        color: #999990;
      }
    }
  }

  .result {
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20rpx;
    &-top {
      margin-bottom: 20rpx;
      text:nth-of-type(1) {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
      }
      text:nth-of-type(2) {
        font-size: 30rpx;
        font-weight: 600;
      }
    }
    &-bto {
      text {
        font-size: 28rpx;
        color: #999999;
        margin-right: 30rpx;
      }
    }
  }
}
</style>
